<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>登录 | 义务教育报告生成平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 h-screen flex flex-col">

<!-- 顶部品牌栏 -->
<header class="p-6 flex items-center space-x-3 bg-gray-300">

    <svg viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600"
         fill="none">
        <path d="M1016.07 840.12c-147.13-0.12-296.7-0.12-441.33-0.12H455.25c-144 0-292.82 0-439.23 0.11-2.83 0-6-0.21-8.46-2.65s-2.67-5.56-2.67-8.36C5 626.22 5 416.53 4.85 205.86c0-2.57 0.3-5.81 2.67-8.18s5.36-2.59 8.28-2.58c23.4 0.23 44.76 0.22 65.3 0 2.69-0.05 5.72 0.25 8 2.54s2.61 5.4 2.61 8.13q-0.09 133.3-0.1 266.61c0 91.52 0 186.16-0.11 279.23v1.22h1c156.31-0.08 315.23-0.11 468.93-0.14q226.9 0 453.8-0.13c2.93 0 6.24 0.33 8.65 2.79s2.69 5.79 2.65 8.74c-0.27 20-0.28 41.32 0 65.29 0 2.72-0.25 5.81-2.51 8.11s-5.28 2.63-7.95 2.63z m-383.71-10.63c126.54 0 256 0 383.69 0.12h0.05v-0.1c-0.26-24.05-0.25-45.49 0-65.55v-0.86h-0.86q-226.9 0.11-453.8 0.13c-153.69 0-312.62 0.06-468.92 0.14-2.75 0-6.22-0.32-8.68-2.81s-2.76-5.75-2.76-9c0.07-93.08 0.09-187.71 0.11-279.23q0-133.31 0.1-266.61v-0.15h-0.07c-20.61 0.24-42 0.25-65.52 0h-0.4v0.24c0.14 210.67 0.14 420.37 0 623.26v0.48h0.7c146.41-0.11 295.27-0.11 439.24-0.11h177.12z"
              fill="#0659FF">

        </path>
        <path d="M891.36 709.83h-24.5c-12.43 0-18.22-5.92-18.22-18.56V293.72c0-13 5.57-18.58 18.64-18.58h50.6c11.72 0 17.41 5.82 17.41 17.74v398.53c0 12.71-5.65 18.39-18.33 18.4z m4.7-424.21h-28.78c-7.35 0-8.2 0.83-8.2 8.07v397.55c0 6.91 1.09 8 7.79 8.05h50c6.93 0 7.89-1 7.89-7.89V446.53 292.86c0-6.07-1.11-7.22-7-7.23zM718.27 709.83h-22.56c-12.52 0-18.35-5.87-18.35-18.42V335.46c0-12.88 5.47-18.38 18.3-18.38h50.53c12.1 0 17.73 5.66 17.73 17.81v355.89c0 13.66-5.23 19-18.67 19h-27z m3.63-382.25h-26.25c-7 0-7.85 0.88-7.85 7.87V691.4c0 6.79 1.11 7.9 7.92 7.91h49.53c4.7 0 6.37-0.7 6.94-1.28s1.29-2.34 1.29-7.2V468.94v-134c0-6.41-0.89-7.3-7.29-7.3zM550.32 711h-21.85c-11.69 0-17.63-5.94-17.63-17.62V378.8c0-11.42 6-17.49 17.24-17.53 16.71-0.07 33.74-0.07 52.06 0 11.44 0 17.25 5.89 17.25 17.4v313.1c0 14-5.12 19.25-18.88 19.25h-28.2z m3.58-339.28h-25.78c-5.43 0-6.83 1.46-6.83 7V693.3c0 5.77 1.35 7.1 7.2 7.11H578.53c4.91 0 6.61-0.69 7.17-1.26s1.27-2.37 1.27-7.48V497 378.66c0-5.72-1.15-6.88-6.84-6.9-9.03 0.01-17.73-0.01-26.23-0.01zM377.63 712.15H354.5c-11.33 0-17.32-6-17.32-17.37v-275c0-11.71 5.92-17.65 17.58-17.67h51.53c11.61 0 17.49 6 17.5 17.68v273.99c0 12.7-5.63 18.36-18.26 18.37h-27.9z m3.15-299.61h-26c-5.88 0-7.15 1.28-7.15 7.16v275c0 5.57 1.29 6.86 6.88 6.86h51.01c6.94 0 7.82-0.88 7.82-7.85V519.57v-99.83c0-6-1.19-7.16-7.06-7.17zM212.31 708.5h-25.6c-11.4 0-17.18-5.87-17.19-17.38V546.61v-83.08c0-12.67 5.67-18.33 18.37-18.33H238.41c11.95 0 17.75 5.91 17.76 18v227.59c0 11.89-5.71 17.68-17.44 17.7z m3.07-252.82h-27.49c-7 0-7.93 1-7.93 7.82v227.58c0 5.76 1.08 6.86 6.76 6.87h52c5.89 0 7-1.15 7-7.18V463.18c0-6.23-1.23-7.49-7.32-7.5z"
              fill="#F39800">

        </path>
    </svg>


    <!-- 平台名称 -->
    <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-blue-600">
        义务教育报告生成平台
    </h1>
</header>

<!-- 登录卡片 -->
<main class="flex-grow flex items-center justify-center">
    <div class="w-full max-w-2xl bg-white rounded-2xl shadow-2xl p-10 flex flex-col items-center">

        <!-- 顶部图片 -->
        <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="用户图标" class="w-24 h-24 mb-4"/>

        <h2 class="text-3xl font-semibold text-center text-gray-800 mb-6">欢迎登录</h2>

        <form id="loginForm" method="post" class="space-y-5 w-full max-w-md" action="{% url 'login' %}">
            <div>
                <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                <input type="text" id="username" placeholder="请输入用户名" name="username"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-black text-base"
                       required/>
            </div>

            <div>
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                <input type="password" name="pwd" id="password" placeholder="请输入密码"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-black text-base"
                       required/>
            </div>

            <div id="error" class="text-sm text-red-600 hidden">用户名或密码错误，请重试。</div>

            <button type="submit" name="action" value="login"
                    class="w-full bg-green-500 text-white py-3 rounded-lg hover:bg-gray-800 transition text-lg">
                登录
            </button>
            <a href="/register"
               class="w-full block text-center bg-blue-500 text-white py-3 rounded-lg hover:bg-blue-600 transition text-lg">
                注册
            </a>
        </form>
        <!-- 显示错误信息 -->
        {% if error %}
            <p style="color:red;">{{ error }}</p>
        {% endif %}
        <p class="text-xs text-gray-400 mt-6 text-center">登录即表示您同意我们的服务条款与隐私政策。</p>
    </div>
</main>

</body>
</html>
